<template>
  <div class="app-container">
    <div class="left-section">
      <div class="logo" ref="logo">
        <svg width="32" height="32" viewBox="0 0 32 32">
          <rect width="32" height="32" rx="6" fill="#0052d9"/>
          <path d="M8 12 C8 8 12 8 16 8 C20 8 24 8 24 12 C28 12 28 16 24 16 C24 20 20 20 16 20 C12 20 8 20 8 16 C4 16 4 12 8 12" 
                fill="white"/>
          <path d="M16 14 L16 24 M13 21 L16 24 L19 21" 
                stroke="#0052d9" 
                stroke-width="2"
                fill="none"/>
        </svg>
        <span>COS存储管理工具</span>
      </div>
      
      <div class="welcome-text" ref="welcomeText">
        <h1>让分享变得更容易</h1>
        <p>快速、安全、便捷的对象存储工具</p>
      </div>

      <div class="wave-container">
        <div class="wave wave1"></div>
        <div class="wave wave2"></div>
        <div class="wave wave3"></div>
      </div>
      
      <div class="illustration"></div>
    </div>
    <div class="right-section">
      <login-form ref="loginForm"></login-form>
    </div>
    <exit-dialog></exit-dialog>
  </div>
</template>

<script>
import { gsap } from 'gsap'
import LoginForm from '@/components/LoginForm.vue'
import ExitDialog from '@/components/ExitDialog.vue'

export default {
  name: 'LoginView',
  components: {
    LoginForm,
    ExitDialog
  },
  mounted() {
    this.initializeAnimations()
  },
  methods: {
    initializeAnimations() {
      const tl = gsap.timeline()
      
      tl.from(this.$refs.logo, {
        y: -50,
        opacity: 0,
        duration: 1,
        ease: 'power3.out'
      })
      
      .from(this.$refs.welcomeText.children, {
        y: 30,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: 'power3.out'
      })
      
      .from(this.$refs.loginForm.$el, {
        x: 100,
        opacity: 0,
        duration: 0.8,
        ease: 'power3.out'
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

/* ... 其他样式 ... */
</style> 